<template>
	<view class="content font_family">
		<view class="header" :style="{paddingTop:menuButtonInfo}">
			<text>消息</text>
		</view>
		<!-- 消息列表 -->
		<view class="msg_box">
			<view class="item">
				<view class="xt_tz f" @click="go('/pages/msg/xt_tz')" v-if="xt_tz">
					<image src="../../static/public/xt_tz.png" mode=""></image>
					<view class="msg">
						<view class="">
							<view class="title">
								系统通知
							</view>
							<view class="text text_ellipsis">
								{{xt_tz.last_message}}
							</view>
						</view>
					</view>
					<view class="f_d f_z_b">
						<view class="time">
							{{xt_tz.last_time}}
						</view>
						<view class="f_zj">
							<view class="tag" v-if="xt_tz.unread_msg_count>0">
								{{xt_tz.unread_msg_count}}
							</view>
						</view>
					</view>
				</view>
				<!-- <u-swipe-action @click="swipe_action(index)">
					<u-swipe-action-item v-for="(item,index) in sessionlist" :key="index" :name='index'
						:options="item.is_top===0?options1:options2" @click='swipe_action_btn' :show='false'>
						<view class="swipe-action">
							<view class="swipe-action__content">
								<view class="msg_content f" @click="go(`/pages/msg/msg_room?id=${item.df_id}`)">
									<view class="left f_zj">
										<u-avatar :src="item.df_avatar" size="72rpx" mode="aspectFill"></u-avatar>
									</view>
									<view class="msg f">
										<view class="">
											<view class="msg_title">
												{{item.df_user}}
											</view>
											<view class="msg_des">
												{{item.last_message}}
											</view>
										</view>
										<view class="right f_d f_z_b">
											<view class="time">
												{{item.last_time}}
											</view>
											<view class=" f_zj" v-if="item.unread_msg_count>0">
												<view class="tag">
													{{item.unread_msg_count}}
												</view>
											</view>
										</view>
									</view>
								</view>
							</view>
						</view>
					</u-swipe-action-item>
				</u-swipe-action> -->
			</view>
			<u-empty text='没有消息哦~' icon="/static/public/kong.png" v-if="!xt_tz">
			</u-empty>
		</view>
		<!-- 客服悬浮按钮 -->
		<movable-area class="js_movable">
			<movable-view x="350" y="1000" direction="all" class="js_view f_zj">
				<button open-type="contact" class="f_d f_j kf_btn">
					<image src="../../static/public/kf.png" mode=""></image>
					<view class="">
						客服
					</view>
				</button>
			</movable-view>
		</movable-area>
	</view>
</template>

<script>
	import { mapState } from 'vuex'
	export default {
		computed: {
			...mapState(['menuButtonInfo', 'sessionlist', 'xt_tz'])
		},
		data() {
			return {
				// 胶囊
				options1: [{
					btn: '置顶',
					style: {
						backgroundColor: '#ffffff'
					}
				}, {
					btn: '删除',
					style: {
						backgroundColor: '#ffffff'
					}
				}],
				options2: [{
					btn: '取消置顶',
					style: {
						backgroundColor: '#ffffff'
					}
				}, {
					btn: '删除',
					style: {
						backgroundColor: '#ffffff'
					}
				}]
			};
		},
		onLoad() {

		},
		onShow() {
			// 清除角标
			uni.removeTabBarBadge({
				index: 3
			})
		},
		watch: {},
		methods: {
			// swipe_action(index) {
			// 	// console.log(index)
			// },
			swipe_action_btn(e) {
				console.log(this.sessionlist)
				if (e.btn == '删除') {
					let message = {
						c: 'Message',
						a: 'delSession',
						data: {
							session_id: this.sessionlist[e.name].id,
							user_id: this.sessionlist[e.name].user_id
						}
					}
					this.$me_scoket.send(message)
				} else if (e.btn == '置顶') {
					let message = {
						c: 'Message',
						a: 'top',
						data: {
							session_id: this.sessionlist[e.name].id,
							user_id: this.sessionlist[e.name].user_id,
							type: 1
						}
					}
					this.$me_scoket.send(message)
				} else {
					let message = {
						c: 'Message',
						a: 'top',
						data: {
							session_id: this.sessionlist[e.name].id,
							user_id: this.sessionlist[e.name].user_id,
							type: 0
						}
					}
					this.$me_scoket.send(message)
				}
			},
			go_room(index) {
				uni.navigateTo({
					url: '/pages/msg/msg_room'
				})
			}
		},
	};
</script>

<style lang="scss">
	.u-page {
		padding: 0;
	}

	.u-demo-block__title {
		padding: 10px 0 2px 15px;
	}

	.swipe-action {
		&__content {
			padding: 25rpx 0;

			&__text {
				font-size: 15px;
				color: $u-main-color;
				padding-left: 30rpx;
			}
		}
	}

	.content {
		background-color: white;

		::v-deep .u-border-top {
			border: none;
		}

		::v-deep .u-border-bottom {
			border: none;
		}

		.header {
			font-weight: 400;
			font-size: 48rpx;
			color: #000000;
			line-height: 44rpx;
			font-style: normal;
			text-transform: none;
			margin-left: 30rpx;
		}

		.msg_box {
			margin-top: 48rpx;

			.item {
				.xt_tz {
					padding: 0rpx 30rpx;

					image {
						width: 72rpx;
						height: 72rpx;
					}

					.msg {
						flex: 1;
						margin-left: 24rpx;

						.title {
							font-weight: 400;
							font-size: 28rpx;
							line-height: 44rpx;
							color: #232323;
						}

						.text {
							width: 500rpx;
							line-height: 44rpx;
							font-weight: 400;
							font-size: 22rpx;
							color: #666666;
						}
					}

					.time {
						font-weight: 400;
						font-size: 22rpx;
						color: rgba(35, 35, 35, 0.6);
						line-height: 44rpx;
						font-style: normal;
						text-transform: none;
					}

					.tag {
						// height: 32rpx;
						background: #FF5967;
						border-radius: 30rpx 30rpx 30rpx 30rpx;
						padding: 3rpx 18rpx;
						font-weight: 400;
						font-size: 20rpx;
						color: #FFFFFF;
						// line-height: 44rpx;
						font-style: normal;
						text-transform: none;
					}

				}

				.msg_content {
					padding: 0rpx 30rpx;

					.left {}

					.msg {
						padding-bottom: 15rpx;
						flex: 1;
						border-bottom: 1rpx solid #E1E1E1;
						margin-left: 24rpx;

						.msg_title {
							font-weight: 400;
							font-size: 28rpx;
							color: #232323;
							line-height: 44rpx;
							font-style: normal;
							text-transform: none;
						}

						.msg_des {
							font-weight: 400;
							font-size: 22rpx;
							color: #666666;
							line-height: 44rpx;
							font-style: normal;
							text-transform: none;
							width: 400rpx;
							overflow: hidden;
							white-space: nowrap;
							text-overflow: ellipsis;
						}
					}

					.right {
						margin-left: auto;

						.time {
							font-weight: 400;
							font-size: 22rpx;
							color: rgba(35, 35, 35, 0.6);
							line-height: 44rpx;
							font-style: normal;
							text-transform: none;
						}

						.tag {
							// height: 32rpx;
							background: #FF5967;
							border-radius: 30rpx 30rpx 30rpx 30rpx;
							padding: 3rpx 18rpx;
							font-weight: 400;
							font-size: 20rpx;
							color: #FFFFFF;
							// line-height: 44rpx;
							font-style: normal;
							text-transform: none;
						}
					}
				}
			}
		}
	}
</style>